<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Meteora.Bubble</title>

    <!-- Meteora -->
    <script src="../../src/meteora.js" type="text/javascript"></script>
    <!-- Meteora -->

    <link type="text/css" rel="stylesheet" href="../css/test.css" />

    <style type="text/css">
      #bubble-1 {
        width: 200px;
        height: 200px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>

    <h1>Meteora.Bubble</h1>

    <div class="instructions">
      Move your mouse in and out the rectabgle, a bubble will appear where
      is appropiate and remain there until the windows changes it size or the element changes
      its position.
      Click on the inputs and have fun using the tab key.
    </div>

    <h3>Bubble 1</h3>
    Following mouse
    <div id="bubble-1" class="demo-block"></div>

    <div class="twocolumns">
      <div class="column">

        <h3>Bubble 2</h3>
        Opened at start, featuring a red line<br />
        <input type="text" id="bubble-2" value="Click me, then unfocus me" />

      </div>
      <div class="column">

        <h3>Bubble 3</h3>
        Show when focus, hide when blur<br />
        <input type="text" id="bubble-3" value="Click me, then unfocus me" />

      </div>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </div>

    <script type="text/javascript">

      Meteora.uses('Meteora.Bubble');

      Meteora.onStart(
        function () {

          new Bubble(
            'bubble-1',
            'Lorem Ipsum',
            {
              'showEvent':  'mouseenter',
              'hideEvent':  'mouseleave'
            }
          );
          
          var bubble = new Bubble(
            'bubble-2',
            'Lorem Ipsum',
            {
              'showEvent':  'focus',
              'hideEvent':  'blur',
              'width':      200,
              'height':     90
            }
          );
          bubble.show();
          bubble.red();

          var bubble = new Bubble(
            'bubble-3',
            'Lorem Ipsum',
            {
              'showEvent':  'focus',
              'hideEvent':  'blur',
              'width':      300
            }
          );
          
        }
      );
    </script>
    
  </body>
</html>
